<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Unix 时间戳转换工具</title>
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5">
        <h1 class="mb-4">Unix 时间戳转换工具</h1>
        <form class="mb-3">
            <div class="form-floating mb-3">
                <input type="number" class="form-control" placeholder="请输入 Unix 时间戳" id="unixTimestampInput">
                <label for="unixTimestampInput">Unix 时间戳</label>
            </div>
            <div class="form-floating mb-3">
                <input type="datetime-local" class="form-control" id="dateTimeInput" value="">
                <label for="dateTimeInput">时间</label>
            </div>
            <button type="button" class="btn btn-primary me-3" onclick="convertToDateTime()">Unix 时间戳 转 时间</button>
            <button type="button" class="btn btn-primary" onclick="convertToUnixTimestamp()">时间 转 Unix 时间戳</button>
        </form>
        <div class="mt-4">
            <p>结果：<span id="result"></span></p>
        </div>
    </div>
    
    <script>
        // 获取当前时间戳
        const currentUnixTimestamp = Math.floor(Date.now() / 1000);

        // 填充默认时间
        const defaultDateTimeInputValue = new Date(currentUnixTimestamp * 1000).toISOString().slice(0, -8);
        document.getElementById("dateTimeInput").value = defaultDateTimeInputValue;

        function convertToDateTime() {
            // 获取 Unix 时间戳 输入框中的数值
            const unixTimestampInput = parseInt(document.getElementById("unixTimestampInput").value.trim());

            // 如果输入非法，则提示用户重新输入
            if (isNaN(unixTimestampInput)) {
                alert("请输入正确的 Unix 时间戳！");
                return;
            }

            // 转换为本地时间，并格式化为可读性较好的形式
            const dateTimeString = new Date(unixTimestampInput * 1000).toLocaleString();

            // 更新页面显示的结果
            document.getElementById("result").textContent = dateTimeString;
        }

        function convertToUnixTimestamp() {
            // 获取时间输入框中的时间字符串
            const dateTimeInput = document.getElementById("dateTimeInput").value.trim();

            // 如果输入非法，则提示用户重新输入
            if (dateTimeInput === "") {
                alert("请输入正确的时间！");
                return;
            }

            // 解析时间字符串，获取对应的 Unix 时间戳
            const unixTimestamp = Math.floor(new Date(dateTimeInput).getTime() / 1000);

            // 更新页面显示的结果
            document.getElementById("result").textContent = unixTimestamp;
        }
    </script>

</body>

</html>
